<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>rem问卷</title>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<link href='http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet'>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul li {
				list-style-type: none;
			}
			
			html,
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
			
			.body {
				font-family: "MicroSoft YaHei";
				position: relative;
				background-color: #f2f8ff;
				padding-bottom: 0.8rem;
				height: 100%;
			}
			/*1rem等于100rem*/
			
			.contents {
				width: 100%;
				height: 3.6rem;
			}
			/*问卷标题*/
			
			#questionTitle {
				width: 70%;
				margin: 0 auto;
				position: absolute;
				top: 0.6rem;
				left: 15%;
				color: #FFFFFF;
				text-align: center;
				line-height: 0.8rem;
			}
			
			.q-note {
				position: relative;
				top: -0.9rem;
				width: 94%;
				left: 3%;
				border: 2px solid #08254D;
				border-radius: 0.2rem;
				min-height: 8.2rem;
				background-color: #FFFFFF;
			}
			
			.q-note-title {
				color: #fff;
				display: block;
				font-size: 0.36rem;
				width: 2.4rem;
				line-height: 0.6rem;
				text-align: center;
				position: absolute;
				top: 0.4rem;
				left: 50%;
				margin-left: -1.2rem;
				background-image: url(../images/quan/mobile-note@2x.png);
				background-size: 100% 100%;
			}
			/* 问题显示区域 */
			
			.q-note-block {
				width: 6.5rem;
				margin: 0 auto;
				margin-top: 1.5rem;
				color: #1a1a1a;
				font-size: 0.28rem;
			}
			
			.choice-list {
				margin-left: 0;
				padding-left: 0;
			}
			
			.choice-list>li {
				list-style: none;
				font-size: 0.28rem;
				margin-top: 0.2rem;
				line-height: 0.28rem;
			}
			
			.choice-list>li label {
				cursor: pointer;
				font-weight: normal !important;
				margin-bottom: 0;
				margin-left: 0.16rem;
			}
			
			textarea {
				resize: none;
				outline: none;
			}
			
			.btn-sure {
				margin-bottom: 1rem;
				text-align: center;
			}
			
			.btn-sure .btn-begin {
				width: 3rem;
				line-height: 0.88rem;
				background-color: #116FF0;
				font-size: 0.36rem;
				color: #FFFFFF;
				border: 2px solid #08254D;
				border-radius: 0.16rem;
				margin-top: -0.4rem;
			}
			
			.btn-list-block {
				width: 5.6rem;
				height: 1rem;
				margin: 0.8rem auto;
				text-align: center;
			}
			
			.btn-list-block>button {
				outline: none;
				width: 2.4rem;
				border: 2px solid #08254D;
				line-height: 0.88rem;
				font-size: 0.36rem;
				color: #fff;
				border-radius: 0.16rem;
				background-color: #116ff0;
			}
			
			.btn-list-block .btn-disable{
				background-color: #92b9ee;
				border: 2px solid #608cc9;
			}
			.btn-left {
				float: left;
			}
			
			.btn-right {
				float: right;
			}
			
			.q-wenti,
			.q-body {
				font-size: 0;
				font-weight: bold;
			}
			
			.q-wenti>span {
				font-size: 0.32rem;
			}
			
			.q-ans-block {
				width: 6rem;
				margin: 0 auto;
				font-size: 0.32rem;
			}
			
			.q-ans-input>textarea {
				border-color: #c4c0cc;
				padding: 0.12rem 0.24rem;
				font-size: 0.28rem;
			}
			
			.q-sbumit {
				text-align: center;
				margin: 2.7rem auto;
			}
			
			.q-success {
				font-size: 0.36rem;
				color: #333333;
				font-weight: bold;
			}
			
			.q-answer {
				width: 6.5rem;
				text-align: center;
				margin: -0.4rem auto;
			}
			/*答案序号*/
			
			.q-answer>span {
				width: 0.44rem;
				height: 0.44rem;
				text-align: center;
				line-height: 0.44rem;
				background-image: url(../images/quan/mobile-uncheck@2x.png);
				background-size: 100% 100%;
				cursor: pointer;
				display: inline-block;
				margin: 0.05rem;
				font-size: 0.24rem;
				color: #666666;
			}
			/*已答题题号样式*/
			
			.q-answer .q-answer-active {
				background-image: url(../images/quan/mobile-checked@2x.png);
				color: white;
			}
			/*选择框样式*/
			
			.checkStyle {
				width: 0.28rem;
				height: 0.28rem;
				-webkit-appearance: none;
				background-image: url(../images/quan/mobile-unchoose@2x.png);
				background-size: 100% 100%;
			}
			
			.checkStyle:checked {
				background-image: url(../images/quan/mobile-choosed@2x.png);
				background-size: 100% 100%;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="body">
			<div class="contents">
				<img src="../images/quan/mobile-banner-bg@2x.png" width="100%" />
				<h1 class="text-center" id="questionTitle">关于神州浩天的服务说明是今天</h1>
			</div>
			<!--单个问题-->
			<div class="q-note" data-index="" data-id="">
				<!-- 序号部分 -->
				<span class="q-note-title">
					          说明
				     </span>
				<div class="q-note-block">
					<ul>
						<li>1.开始答题</li>
						<li>2.开始答题</li>
						<li>3.开始答题</li>
					</ul>
				</div>
			</div>
			<div class="btn-sure">
				<button class="btn-begin">开始答题</button>
			</div>

			<div class="q-note" data-index="" data-id="">
				<span class="q-note-title">
                    <span class="question-index">1</span>&nbsp;/&nbsp;<span class="question-total">12</span>
				</span>
				<div class="q-note-block">
					<p class="q-wenti">
						<span class="question-index q-wenti-index">2.</span>
						<span class="q-body">您平常使用的软件是什么?</span>
						<span class="q-type q-body">（单选）</span>
					</p>
				</div>
				<!-- 答案部分 -->
				<!-- 隐藏域存放用户选择的值 -->
				<input type="text" name="" class="hidden-ans" data-hidden-ans="1" value="">
				<div class="q-ans-block">
					<!-- 选择部分 1是单选  2是多选-->
					<ul class="choice-list" data-choice-type="1">
						<li>
							<input type="radio" name="data-che" id="ans-id-1" value="1" class="checkStyle">
							<label for="ans-id-1">智慧财税代理版</label>
						</li>
						<li>
							<input type="radio" name="data-che" id="ans-id-2" value="2" class="checkStyle">
							<label for="ans-id-2">智慧财税代理版</label>
						</li>
						<li>
							<input type="radio" name="data-che" id="ans-id-3" value="3" class="checkStyle">
							<label for="ans-id-3">智慧财税代理版</label>
						</li>
						<li>
							<input type="radio" name="data-che" id="ans-id-4" value="" class="checkStyle">
							<label for="ans-id-4">其他</label>
						</li>
					</ul>
					<!-- 自定义输入部分 -->
					<div class="q-ans-input">
						<textarea name="" id="" cols="30" rows="5" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>
						<p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>
					</div>
				</div>
			</div>
			<div class="q-note" data-index="" data-id="">
				<span class="q-note-title">
                    <span class="question-index">1</span>&nbsp;/&nbsp;<span class="question-total">12</span>
				</span>
				<div class="q-note-block">
					<p class="q-wenti">
						<span class="question-index q-wenti-index">2.</span>
						<span class="q-body">您平常使用的软件是什么?</span>
						<span class="q-type q-body">（多选）</span>
					</p>
				</div>
				<!-- 答案部分 -->
				<!-- 隐藏域存放用户选择的值 -->
				<input type="text" name="" class="hidden-ans" data-hidden-ans="1" value="">
				<div class="q-ans-block">
					<!-- 选择部分 1是单选  2是多选-->
					<ul class="choice-list" data-choice-type="2">
						<li>
							<input type="checkbox" name="data-che" id="ans-id-1" value="1" class="checkStyle">
							<label for="ans-id-1">智慧财税代理版</label>
						</li>
						<li>
							<input type="checkbox" name="data-che" id="ans-id-2" value="2" class="checkStyle">
							<label for="ans-id-2">智慧财税代理版</label>
						</li>
						<li>
							<input type="checkbox" name="data-che" id="ans-id-3" value="3" class="checkStyle">
							<label for="ans-id-3">智慧财税代理版</label>
						</li>
						<li>
							<input type="checkbox" name="data-che" id="ans-id-4" value="" class="checkStyle">
							<label for="ans-id-4">其他</label>
						</li>
					</ul>
					<!-- 自定义输入部分 -->
					<div class="q-ans-input">
						<textarea name="" id="" cols="30" rows="5" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>
						<p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>
					</div>
				</div>
			</div>
			<div class="q-note" data-index="" data-id="">
				<span class="q-note-title">
                <span class="question-index">1</span>&nbsp;/&nbsp;<span class="question-total">12</span>
				</span>
				<div class="q-note-block">
					<p class="q-wenti">
						<span class="question-index q-wenti-index">20.</span>
						<span class="q-body">您对我们有什么建议?</span>
						<span class="q-type q-body">（问答）</span>
					</p>
				</div>
				<div class="q-ans-block">
					<div class="q-ans-input" style="margin-top: 20px;">
						<textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>
						<p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>
					</div>
				</div>
			</div>
			<div class="q-note" data-index="" data-id="">
				<div class="q-note-block">
					<div class="q-sbumit" style="">
						<p><img src="../images/quan/web80-submit.png" width="15%" /></p>
						<p class="q-success">提交成功，感谢您的支持！</p>
					</div>
				</div>
			</div>
			<!--答案序号部分-->
			<div class="q-answer">
				<span class="q-answer-active">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
			</div>
			<div class="btn-list-block">
				<button href="javascript:;" class="btn-left ">上一题</button>
				<!--<button href="javascript:;" class="btn-right" style="margin-top:0;">上一题</button>-->
				<button href="javascript:;" class="btn-disable btn-right" style="margin-top:0;">提交</button>
			</div>
			<div class="q-container">

			</div>
		</div>
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				titleHandle();
				singleQuestionHandle();
				quesMsg();
			});
			/**
			 * 单个问题的答案选择事件 
			 */
			function singleQuestionHandle() {
				$('body').on('change', '.q-note', function() {
					var choiceType = $(this).find('.choice-list').attr('data-choice-type');
					var $hiddenAns = $(this).find('.hidden-ans');
					if(choiceType == '1') {
						var val = $(this).find('input:radio:checked').val();
						$hiddenAns.val(val)
					} else if(choiceType == '2') {
						var item = [];
						$(this).find('input:checkbox').each(function() {
							if($(this).is(":checked")) {
								item.push($(this).val());
							}
						});
						$hiddenAns.val(item)
					}
				});
			}
			/**
			 *  关于标题的处理(字体及折行)
			 *  长度超出12折行 并且上边字数少 下边字数多
			 */
			function titleHandle() {
				var title = $("#questionTitle").text().trim();
				if(title.length > 12) {
					$("#questionTitle").css('font-size', '0.42rem');
					if(title.length % 2 == 0) {
						title = title.substr(0, (title.length - 4) / 2) + "<br/>" + title.substr((title.length - 4) / 2);
					} else {
						title = title.substr(0, (title.length - 3) / 2) + "<br/>" + title.substr((title.length - 3) / 2);
					}
					$("#questionTitle").html(title);
				} else {
					$("#questionTitle").css('font-size', '0.56rem');
				}

			}
			//请求到数据，生成html
			function quesMsg() {
				var qJson = {
					"view": null,
					"model": {
						"info": {
							"questions": [{
								"qustion": {
									"id": 1,
									"qnaId": 2,
									"stem": "你最喜欢的水果是？",
									"type": "1"
								},
								"options": [{
									"id": 1,
									"qnaId": 2,
									"quesId": 1,
									"content": "草莓",
									"poll": null
								}, {
									"id": 2,
									"qnaId": 2,
									"quesId": 1,
									"content": "樱桃",
									"poll": null
								}, {
									"id": 3,
									"qnaId": 2,
									"quesId": 1,
									"content": "芭乐",
									"poll": null
								}, {
									"id": 4,
									"qnaId": 2,
									"quesId": 1,
									"content": "西瓜",
									"poll": null
								}]
							}, {
								"qustion": {
									"id": 2,
									"qnaId": 2,
									"stem": "想去哪些地方看看？",
									"type": "2"
								},
								"options": [{
									"id": 5,
									"qnaId": 2,
									"quesId": 2,
									"content": "加拿大-魁北克",
									"poll": null
								}, {
									"id": 6,
									"qnaId": 2,
									"quesId": 2,
									"content": "泰国-清迈",
									"poll": null
								}, {
									"id": 7,
									"qnaId": 2,
									"quesId": 2,
									"content": "中国-上海",
									"poll": null
								}, {
									"id": 8,
									"qnaId": 2,
									"quesId": 2,
									"content": "中国-北京",
									"poll": null
								}]
							}, {
								"qustion": {
									"id": 3,
									"qnaId": 2,
									"stem": "你最讨厌哪些运动？",
									"type": "3"
								},
								"options": [{
									"id": 9,
									"qnaId": 2,
									"quesId": 3,
									"content": "仰卧起坐",
									"poll": null
								}, {
									"id": 10,
									"qnaId": 2,
									"quesId": 3,
									"content": "跑步",
									"poll": null
								}, {
									"id": 11,
									"qnaId": 2,
									"quesId": 3,
									"content": "蹲起",
									"poll": null
								}, {
									"id": 12,
									"qnaId": 2,
									"quesId": 3,
									"content": "俯卧撑",
									"poll": null
								}]
							}, {
								"qustion": {
									"id": 4,
									"qnaId": 2,
									"stem": "你觉得绝味鸭脖里的卤味哪些比较好吃？",
									"type": "4"
								},
								"options": [{
									"id": 13,
									"qnaId": 2,
									"quesId": 4,
									"content": "辣的鸡翅尖",
									"poll": null
								}, {
									"id": 14,
									"qnaId": 2,
									"quesId": 4,
									"content": "辣的鸭脖",
									"poll": null
								}, {
									"id": 15,
									"qnaId": 2,
									"quesId": 4,
									"content": "毛豆",
									"poll": null
								}, {
									"id": 16,
									"qnaId": 2,
									"quesId": 4,
									"content": "鸭肠",
									"poll": null
								}, {
									"id": 17,
									"qnaId": 2,
									"quesId": 4,
									"content": "鸭舌",
									"poll": null
								}, {
									"id": 18,
									"qnaId": 2,
									"quesId": 4,
									"content": "鸭锁骨",
									"poll": null
								}]
							}, {
								"qustion": {
									"id": 5,
									"qnaId": 2,
									"stem": "您有什么建议或意见吗？",
									"type": "5"
								}
							}]
						},
						"type": "view"
					},
					"empty": false,
					"viewName": "/website/qnaManage/questionOpera",
					"reference": true,
				}
				var ques = qJson.model.info.questions;
				var html = '<div class="body">' +
					'<div class="q-note">' +
					'				<span class="q-note-title">说明</span>' +
					'				<div class="q-note-block">' +
					'					<ul>' +
					'						<li>1.开始答题</li>' +
					'						<li>2.开始答题</li>' +
					'						<li>3.开始答题</li>' +
					'					</ul>' +
					'				</div>' +
					'			</div>' +
					'			<div class="text-center">' +
					'				<button type="button" class="btn btn-begin">开始答题</button>' +
					'			</div>';
				//循环创建问题
				for(var i = 0; i < ques.length; i++) {
					var question = ques[i].qustion;
					var options = ques[i].options;
					if(question.type == '1' || question.type == '3') {
						html += '<div class="q-note" data-index="" data-id="">' +
							'		<span class="q-note-title">' +
							'            <span class="question-index">' + (i + 1) + '</span>&nbsp;/&nbsp;<span class="question-total">' + ques.length + '</span>' +
							'		</span>' +
							'		<div class="q-note-block">' +
							'			<p class="q-wenti">' +
							'				<span class="question-index q-wenti-index">' + (i + 1) + '、</span>' +
							'				<span class="q-body">' + question.stem + '</span>' +
							'				<span class="q-type q-body">（单选）</span>' +
							'			 </p>' +
							'		</div>' +
							'<div class="q-ans-block">' +
							'		<input type="hidden" name="" class="hidden-ans" data-hidden-ans="1" value="">' +
							'		<ul class="choice-list" data-choice-type="1">';
						for(var j = 0; j < options.length; j++) {
							html += '<li>' +
								'			<input type="radio" name="ans-id-' + question.id + '" id="ans-ids-' + options[j].id + '" value="' + options[j].id + '" class="checkStyle">' +
								'			<label for="ans-ids-1">' + options[j].content + '</label>' +
								'	 </li>';
						}
						if(question.type == '3') {
							html += '</ul>' +
								'		<div class="q-ans-input">' +
								'			<textarea name="" id="" cols="30" rows="5" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>' +
								'			<p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>' +
								'		</div>';
						} else {
							html += '</ul>';
						}
						html += '</div></div>';
					} else if(question.type == '2' || question.type == '4') {
						html += '<div class="q-note" data-index="" data-id="">' +
							'				<span class="q-note-title">' +
							'                <span class="question-index">' + (i + 1) + '</span>&nbsp;/&nbsp;<span class="question-total">' + ques.length + '</span>' +
							'				</span>' +
							'				<div class="q-note-block">' +
							'					<p class="q-wenti">' +
							'						<span class="question-index q-wenti-index">' + (i + 1) + '、</span>' +
							'						<span class="q-body">' + question.stem + '</span>' +
							'						<span class="q-type q-body">（多选）</span>' +
							'					</p>' +
							'				</div>' +
							'<div class="q-ans-block">' +
							'	<input type="hidden" name="" class="hidden-ans" data-hidden-ans="2" value="">' +
							'		<ul class="choice-list" data-choice-type="2">';
						for(var j = 0; j < options.length; j++) {
							html += '<li>' +
								'			<input type="checkbox" name="ans-id-' + question.id + '" id="ans-ids-' + options[j].id + '" value="' + options[j].id + '" class="checkStyle">' +
								'			<label for="ans-ids-1">' + options[j].content + '</label>' +
								'		</li>';
						}
						if(question.type == '4') {
							html += '</ul>' +
								'		  <div class="q-ans-input">' +
								'			  <textarea name="" id="" cols="30" rows="5" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>' +
								'			  <p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>' +
								'		  </div>';
						} else {
							html += '</ul>';
						}
						html += '</div></div>';
					} else if(question.type == '5') {
						html += '<div class="q-note" data-index="" data-id="">' +
							'				<span class="q-note-title">' +
							'                <span class="question-index">' + (i + 1) + '</span>&nbsp;/&nbsp;<span class="question-total">' + ques.length + '</span>' +
							'				</span>' +
							'				<div class="q-note-block">' +
							'					<p class="q-wenti">' +
							'						<span class="question-index q-wenti-index">20.</span>' +
							'						<span class="q-body">您对我们有什么建议?</span>' +
							'						<span class="q-type q-body">（问答）</span>' +
							'					</p>' +
							'				</div>' +
							'				<div class="q-ans-block">' +
							'					<div class="q-ans-input" style="margin-top: 20px;">' +
							'						<textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>' +
							'						<p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>' +
							'					</div>' +
							'				</div>' +
							'			</div>';
					}
				}
				html += '<div class="q-note" data-index="" data-id="">' +
					'				<div class="q-note-block">' +
					'					<div class="q-sbumit" style="">' +
					'						<p><img src="../images/quan/web80-submit.png" width="15%" /></p>' +
					'						<p class="q-success">提交成功，感谢您的支持！</p>' +
					'					</div>' +
					'				</div>' +
					'			</div>' +
					'			<!--答案序号部分-->' +
					'			<div class="q-answer">' +
					'				<span class="q-answer-active">1</span>' +
					'				<span>2</span>' +
					'				<span>3</span>' +
					'				<span>4</span>' +
					'				<span>5</span>' +
					'			</div>' +
					'			<div class="btn-list-block">' +
					'				<button href="javascript:;" class="btn-left">上一题</button>' +
					'				<button href="javascript:;" class="btn-right" style="margin-top:0;">上一题</button>' +
					'			</div>' +
					'		</div>';
				$(".q-container").html(html);
			}
		</script>
	</body>

</html>